{% extends "base.html" %}

{% block title %}{{ message.title }} - 消息详情{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">消息详情</h4>
                    <div>
                        <a href="{{ url_for('message.message_center') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left"></i> 返回消息列表
                        </a>
                        {% if not message.is_read %}
                        <button id="mark-read" class="btn btn-primary ml-2">
                            <i class="fas fa-check"></i> 标记为已读
                        </button>
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-8">
                            <h3>{{ message.title }}</h3>
                            <div class="text-muted mb-3">
                                <p class="mb-1">
                                    <i class="fas fa-user mr-1"></i> 
                                    发送者: {{ message.sender.name if message.sender else '系统' }}
                                </p>
                                <p class="mb-1">
                                    <i class="fas fa-clock mr-1"></i> 
                                    发送时间: {{ message.created_at.strftime('%Y-%m-%d %H:%M:%S') }}
                                </p>
                                <p class="mb-1">
                                    <i class="fas fa-tag mr-1"></i> 
                                    消息类型: {{ message.message_type }}
                                </p>
                                <p class="mb-1">
                                    <i class="fas fa-exclamation-triangle mr-1"></i> 
                                    优先级: 
                                    <span class="badge badge-{{ 
                                        'danger' if message.priority == '紧急' 
                                        else 'warning' if message.priority == '高' 
                                        else 'info' if message.priority == '普通' 
                                        else 'secondary' 
                                    }}">
                                        {{ message.priority }}
                                    </span>
                                </p>
                                <p class="mb-1">
                                    <i class="fas fa-envelope mr-1"></i> 
                                    状态: 
                                    {% if message.is_read %}
                                    <span class="badge badge-success">已读</span>
                                    {% else %}
                                    <span class="badge badge-warning">未读</span>
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            {% if message.related_id and message.related_type %}
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="card-title mb-0">关联信息</h6>
                                </div>
                                <div class="card-body">
                                    <p class="mb-1">
                                        <strong>关联类型:</strong> {{ message.related_type }}
                                    </p>
                                    <p class="mb-1">
                                        <strong>关联ID:</strong> {{ message.related_id }}
                                    </p>
                                    {% if message.related_url %}
                                    <a href="{{ message.related_url }}" class="btn btn-sm btn-outline-primary" target="_blank">
                                        <i class="fas fa-external-link-alt"></i> 查看详情
                                    </a>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title mb-0">消息内容</h6>
                        </div>
                        <div class="card-body">
                            <div class="message-content">
                                {{ message.content | safe }}
                            </div>
                        </div>
                    </div>
                    
                    {% if message.recipients %}
                    <div class="card mt-3">
                        <div class="card-header">
                            <h6 class="card-title mb-0">收件人</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {% for recipient in message.recipients %}
                                <div class="col-md-4 mb-2">
                                    <div class="d-flex align-items-center">
                                        <div class="mr-2">
                                            {% if recipient.is_read %}
                                            <i class="fas fa-check-circle text-success"></i>
                                            {% else %}
                                            <i class="fas fa-times-circle text-warning"></i>
                                            {% endif %}
                                        </div>
                                        <div>
                                            {{ recipient.recipient.name }}
                                            <small class="d-block text-muted">
                                                {% if recipient.is_read %}
                                                已读于 {{ recipient.read_at.strftime('%Y-%m-%d %H:%M') if recipient.read_at else '未知时间' }}
                                                {% else %}
                                                未读
                                                {% endif %}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 标记为已读
    $('#mark-read').click(function() {
        $.post('{{ url_for("message.mark_as_read", message_id=message.id) }}', function(response) {
            if (response.success) {
                location.reload();
            } else {
                alert('操作失败: ' + response.message);
            }
        });
    });
});
</script>
{% endblock %}